<!doctype html>
<html>

<head>
      <meta charset="utf-8">
      <title>手风琴</title>
      <style type="text/css">
            * {margin: 0;padding: 0;}
            img {border: none;width: 700px;height: 400px;border: solid 5px white;filter: grayscale(100%)}
            img:hover {filter: grayscale(0%)}
            .box {width: 1200px;height: 500px;margin: 50px auto;overflow: hidden;}
            li {float: left;list-style: none;width: 106px;height: 400px;overflow: hidden;}
      </style>
      <script type="text/javascript" src="jquery-2.0.3.js">
</script>
      <script>
$(function(){
	$("ul li").mouseover(function(){
		$(this).stop().animate({width:538},500).siblings().stop().animate({width:106},500)
      })
})
</script>
</head>

<body>
      <div class="box">
            <ul>
                  <li><img src="images/1.jpg"></li>
                  <li><img src="images/2.jpg"></li>
                  <li><img src="images/3.jpg"></li>
                  <li><img src="images/4.jpg"></li>
                  <li><img src="images/5.jpg"></li>
                  <li><img src="images/6.jpg"></li>
                  <li><img src="images/7.jpg"></li>
            </ul>
      </div>
</body>

</html>